<template>
  <div style="padding-left: 10px;">
    <el-breadcrumb separator="/" style="padding-bottom: 10px;">
      <el-breadcrumb-item>我的工作台</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/item/list' }">商品管理</el-breadcrumb-item>
    </el-breadcrumb>
    <div style="text-align: left;margin-top: 20px;">

      <el-input placeholder="请输入商品条码"
                prefix-icon="el-icon-search"
                style="width: 170px;"
                v-model="barcode"></el-input>
      <el-button
        align="right" style="margin-bottom: 20px;margin-left: 20px;"
        type="primary" @click="selectItem">查询
      </el-button>
      <el-button
        align="right" style="margin-bottom: 20px;margin-left: 20px;"
        type="success" @click="onSubmit">添加
      </el-button>
    </div>

    <el-table
      :data="itemForm"
      border
      style="width: 80%;">
      <el-table-column
        prop="barcode"
        label="条码"
      >
      </el-table-column>
      <el-table-column
        prop="name"
        label="名称"
      >
      </el-table-column>
      <el-table-column
        prop="price"
        label="价格"
      >
      </el-table-column>
      <el-table-column
        label="类型"
      >
        <template slot-scope="scope">
          {{ scope.row.type === 0 ? '计件商品' : '计重商品' }}
        </template>
      </el-table-column>
      <el-table-column
        prop="unit"
        label="单位"
      >
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleEdit(scope.row.id)">编辑
          </el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.row.id)">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      layout="total,sizes, prev, pager, next, jumper"
      @size-change="handleSizeChange"
      :page-sizes="[10, 20, 40]"
      @current-change="goPage"
      :current-page.sync="pageable.pageNumber"
      :page-size="pageable.pageSize"
      :total="totalElements">
    </el-pagination>
  </div>
</template>

<script>
import itemService from '../global/service/itemService';

export default {
  name: 'ItemList',
  data() {
    return {
      itemForm: [{}],
      pageable: {
        pageNumber: 1,
        pageSize: 10,
      },
      totalElements: 0,
      barcode: '',
    }
  },
  created() {
    this.refreshList()
  },
  methods: {
    goPage(val) {
      console.log('current page:' + val)
      this.$route.query.page = val;
      this.refreshList();
    },
    handleSizeChange(val) {
      console.log(val)
      this.pageable.pageSize = val;
      this.refreshList();
    },
    handleEdit(id) {
      this.$router.push({
        name: 'ItemUpdate',
        params: {id},
      })
    },
    handleDelete(id) {
      itemService.delete(id).then(() => {
        this.refreshList()
      })
    },
    onSubmit() {
      this.$router.push({
        name: 'ItemCreate',
      })
    },
    refreshList() {
      const page = this.pageable.pageNumber - 1 || 0;
      const params = {
        page,
        size: this.pageable.pageSize,
        barcode: this.barcode,
      };
      itemService.getList(params)
        .then((res) => {
          this.itemForm = res.content
          this.pageable.pageNumber = Number(res.pageable.pageNumber) + 1;
          this.pageable.pageSize = Number(res.pageable.pageSize);
          this.totalElements = res.totalElements;
        })
    },
    selectItem() {
      this.refreshList();
    },
  },
}
</script>

<style scoped>
.page-search {
  margin-bottom: 12px;
  text-align: right;
  width: 60%;
}
</style>
